<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>增加和删除订单</title>
  <style>

    body {
      font-size: 13px;
      line-height: 25px;
      font-family: "微软雅黑";
      color: #333;
      background-color: rgba(155, 236, 247, 0.74);
    }

    h1 {
      text-align: center;
      width: 50%;
      border-radius: 50%;
      margin: 0 auto;
      padding: 10px;
      color: rgb(255, 4, 4);
      background-color: #04fd18b7;
      padding: 10px;
    }
    #order {
      margin: 0 auto;
      width: 400px;
    }
    #order tr {
      background-color: #04fd18b7;
    }
    #order tr:hover {
      background-color: #3fc8ebd8;
    }
    table {
      border-top: 1px solid #333;
      border-left: 1px solid #333;
      width: 400px;
    }
    /* 删除按钮的颜色边角变为圆角 */
    input[name="rowdel"] {
      border-radius: 20px;
      background-color: #ff0505;
      color: #fff;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
    /* 增加按钮的颜色 */
    input[name="addOrder"] {
      border-radius: 20px;
      background-color: #ff05d5;
      color: #fff;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
    td {
      border-right: 1px solid #333;
      border-bottom: 1px solid #333;
      text-align: center;
    }

    .title {
      font-weight: bold;
    }

  </style>
</head>

<body>
  <h1>花开富贵幸福超市</h1>
  <table border="0" cellspacing="0" cellpadding="0" id="order">
    <tr class="title">
      <td>商品名称</td>
      <td>数量</td>
      <td>价格</td>
      <td>操作</td>
    </tr>
    <tr id="del1">
      <td>防滑真皮休闲鞋</td>
      <td>12</td>
      <td>&yen;568.50</td>
      <td>
        <input name="rowdel" type="button" value="删除" onclick="delRow(this)" />
      </td>
    </tr>
    <tr>
      <td colspan="4" style="height: 30px">
        <input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
      </td>
    </tr>
  </table>
  <script>
    
    function addRow() {
      var table = document.getElementById("order");
      var row = table.insertRow(1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      cell1.innerHTML = "&nbsp;&nbsp;运动鞋";
      cell2.innerHTML = "&nbsp;&nbsp;10";
      cell3.innerHTML = "&nbsp;&nbsp;&yen;356.00";
      cell4.innerHTML = "<input name='rowdel' type='button' value='删除' onclick='delRow(this)' />";
      
    }
    function delRow(obj) {
      var table = document.getElementById("order");
      var row = obj.parentNode.parentNode;
      var row_index = row.rowIndex;
      table.deleteRow(row_index);
    }
    function changeColor() {
      var h1 = document.querySelector("h1");
      var colors = ["red", "blue", "green", "yellow", "purple"];
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      h1.style.color = randomColor;
    }
    setInterval(changeColor, 500);
  </script>
</body>

</html>